<template>
	<view :class="[{couponsItem_noUsed: item.noUsed,couponsItem_isUsed: item.isUsed}]">
		<view class="couponsItem_main">
			<view>
				{{item.content}}
			</view>
			<view style="color: #8f9199; font-size: 12px;">
				有效期：{{item.date}}
			</view>
		</view>
		<view class="couponsItem_right">
			{{item.noUsed ? "未使用": item.isUsed ? "已使用": ""}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"CouponsItem",
		data() {
			return {
				
			};
		}, props:["item"]
	}
</script>

<style>
	
	.couponsItem_noUsed {
		width: 100%;
		height: 180rpx;
		background-image: url("../static/CouponsBack/item.png");
		background-size: contain;
		background-repeat: no-repeat;
		position: relative;
	}
	
	.couponsItem_isUsed {
		width: 100%;
		height: 180rpx;
		background-image: url("../static/CouponsBack/used.png");
		background-size: contain;
		background-repeat: no-repeat;
		position: relative;
	}
	
	.couponsItem_right {
		position: absolute;
		right: 35rpx;
		top: 42%;
		transform: translateY(-50%);
		color: #FFFFFF;
	}
	
	.couponsItem_main {
		position: absolute;
		left: 50%;
		top: 42%;
		transform: translate(-50%, -50%);
	}

</style>
